<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">活动审核</view>
		</cu-custom>
		<view class="cu-bar bg-white">
			<view class="action sub-title">
				<text class="text-xl text-bold text-green">待审核</text>
				<text class="bg-green" style="width:4rem"></text>
			</view>
		</view>
		<view class="cu-list menu-avatar">
			<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''"
				v-for="(item, index) in auditList" :key="item.id" @touchstart="ListTouchStart"
				@touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
				<view class="cu-avatar radius lg"
					:style="[{backgroundImage: 'url(' + url + '/image/' + item.photo + ')'}]">
				</view>
				<view class="content">
					<view class="text-grey">{{item.title}}</view>
					<view class="text-gray text-sm">
						{{item.content}}
					</view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">{{item.time}}</view>
					<view class="cu-tag round bg-grey sm">{{item.place}}</view>
				</view>
				<view class="move">
					<view class="bg-green" @click="pass(item.id, index)">通过</view>
					<view class="bg-red" @click="reject(item.id)">驳回</view>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white">
			<view class="action sub-title">
				<text class="text-xl text-bold text-green">审核通过</text>
				<text class="bg-green" style="width:4rem"></text>
			</view>
		</view>
		<view class="cu-list menu-avatar">
			<view class="cu-item" :class="modalName=='move-box1-'+ index?'move-cur':''"
				v-for="(item, index) in passList" :key="item.id" @touchstart="ListTouchStart"
				@touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box1-' + index">
				<view class="cu-avatar radius lg"
					:style="[{backgroundImage: 'url(' + url + '/image/' + item.photo + ')'}]">
				</view>
				<view class="content">
					<view class="text-grey">{{item.title}}</view>
					<view class="text-gray text-sm">
						{{item.content}}
					</view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">{{item.time}}</view>
					<view class="cu-tag round bg-grey sm">{{item.place}}</view>
				</view>
				<view class="move">
					<view class="bg-red" @click="reject(item.id)">驳回</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				url: this.url,
				auditList: [
				// 	{
				// 	id: 0,
				// 	title: '金秋艺术节',
				// 	content: '一年一度的金秋艺术节等你来参加, 名额有限, 速来报名!',
				// 	time: '09-18',
				// 	place: '梅园操场',
				// 	img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.nRlAFygdctTCHmIWN7GxRwHaEK?pid=ImgDet&rs=1'
				// }, {
				// 	id: 1,
				// 	title: '清泉计划',
				// 	content: '在亲近大自然的过程中学会更多环境保护的知识!',
				// 	time: '10-25',
				// 	place: '教五102',
				// 	img: 'https://pic3.zhimg.com/v2-c6ae9c3aff36b9b221258f6a90577902_r.jpg'
				// },
				],
				passList: [],
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			pass(id, index){
				console.log(index)
				uni.request({
					method: 'PUT',
					url: this.url + '/admin/' + id + '/true',
					data: {
						flag: true
					},
					header: {
						Authorization: 'Bearer ' + this.userInfo.token,
						// 'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						console.log(res)
						if(res.statusCode == 200){
							this.passList.unshift(this.auditList[index])
							this.auditList.splice(index, 1)
						}
					}
				})
			},
			reject(id){
				uni.request({
					method: 'PUT',
					url: this.url + '/admin/' + id + '/false',
					header: {
						Authorization: 'Bearer ' + this.userInfo.token
					},
					success: (res) => {
						console.log(res)
						if(res.statusCode == 200){
							
						}
					}
				})
			}
		},
		onLoad() {
			uni.request({
				method: 'GET',
				url: this.url + '/admin/judge',
				header: {
					Authorization: 'Bearer ' + this.userInfo.token
				},
				success: (res) => {
					console.log(res)
					if(res.statusCode == 200){
						this.auditList = res.data.records
					}
				}
			})
			uni.request({
				method: 'GET',
				url: this.url + '/admin/pass',
				header: {
					Authorization: 'Bearer ' + this.userInfo.token
				},
				success: (res) => {
					console.log(res)
					if(res.statusCode == 200){
						this.passList = res.data.records
					}
				}
			})
		}
	}
</script>

<style>

</style>
